<template>
	<view class="couponDetail" v-if="user">
		<view class="couponHeader">
			<view :class="[used ?'active':'']" @click="changeTab(0)">未使用</view>
			<view :class="[used ?'':'active']" @click="changeTab(1)">已使用/已过期</view>
		</view>
		<view class="couponList">
			<view class="coupon-item" v-for="(item,index) in pageItems" :key="index">
				<view :class="[used ?'coupon-prev-used':'coupon-prev']">
					<view class="coupon-decrement-price">
						<text>¥</text>
						<text>{{item.decrement_price}}</text>
					</view>
					<view class="coupon-full-price">满{{item.full_price}}元...</view>
					
				</view>
				<view  :class="[used ?'coupon-next-used':'coupon-next']">
					<view class="detail-top"> 
						<view class="coupon_type" v-if="item.type=='common'">通用</view>
						<view class="coupon_type" v-else>盲箱</view>
						<view class="coupon_name">{{item.name}}</view>
					</view>
					<view class="detail-bottom">
						<view class="coupon_time">{{item.destory_at}}</view> 
						
						<view class="use" v-if ="used && item.is_used==true">已使用</view>
						<view class="use" v-else-if="used && item.is_used==false && item.is_destory == true">已过期</view>
						<view class="use" v-else  @click="goPage(item.type)">去使用</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-more" v-if="pageHasNoMore">
		  --- 没有更多数据了 ---
		</view>
	</view>	
</template>

<script> 
	import store from "store"
	import {mapGetters,mapMutations} from 'vuex'
	import { getUserCoupons,getUser } from "api/userApi"
	import { getBrokeragesTotal } from "api/brokerageApi"
	import Pagination from "mixins/Pagination"
	export default {
		store,
		mixins:[Pagination],
		computed:{
			...mapGetters([
				'statusBar',
				'user',
				'isLogin'
			])
		},
		data(){
			return {
				'datetimerange':[],
				'money':0,
				'used':0,
			}
		},
		watch: {
			datetimerange(newval) {
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			goPage(type) {
				
				if(type=="common"){
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}else{
					uni.reLaunch({
						url: '/pages/box/box'
					})
				}
			 
			},
			changeTab(type){
				this.used = type;
				this.pageNumber = 1
				this.pageItems = []
				this.pageHasNoMore = false
				this.loadPageData()
				
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadPageItems() {
				
			   let response =  await getUserCoupons({page: this.pageNumber,used:this.used});
			   let res = response.data;
			   if(res.data){
				   res.meta = {
				   	  'current_page' : res.current_page,
					  'last_page' : res.last_page
				   				   
				   } 	
				   
			   }
			   return res; 
			 
			},
			back(){
				uni.navigateBack()
				
			}
		},
		async onShow() {
			if(await this.isLogin){
				await this.getUser();
				await this.loadPageData();
				
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.couponDetail{
		background-color:#F6F6F6
	}
	.couponHeader{
		height:94rpx;
		display:flex;
		background:#fff;
		border-top:2rpx solid #f2f2f2;
		justify-content:space-around;
		align-items: center;
		
	}
	.coupon-item{
		width:712rpx;
		height:204rpx;
		margin:16rpx auto 0rpx;
		display:flex;
		.coupon-prev{
			width:248rpx;
			height:204rpx;
			background:url('/static/images/coupon-backgrouond.png') no-repeat;
			background-size:248rpx 204rpx; 
			
			
			.coupon-decrement-price{
				margin:0 auto;
				padding-top:24rpx;
				color:#fff;
				height:112rpx;
				line-height:112rpx;
				text-align: center;
				>text:nth-child(1){
					font-size:40rpx;
				}
				>text:nth-child(2){
					font-size:80rpx;
					
				}
			}
			.coupon-full-price{
				font-size:28rpx;
				color:#fff;
				text-align: center;
			}
		}
		.coupon-prev-used{
			width:248rpx;
			height:204rpx;
			background:url('/static/images/coupon-backgrouond-used.png') no-repeat;
			background-size:248rpx 204rpx; 
			
			 
			.coupon-decrement-price{
				margin:0 auto;
				padding-top:24rpx;
				color:#fff;
				height:112rpx;
				line-height:112rpx;
				text-align: center;
				>text:nth-child(1){
					font-size:40rpx;
				}
				>text:nth-child(2){
					font-size:80rpx;
					
				}
			}
			.coupon-full-price{
				font-size:28rpx;
				color:#fff;
				text-align: center;
			}
		}
		.coupon-next{
			width:470rpx;
			background:#fff;
			.detail-top{
				width:418rpx;
				margin-left:36rpx;
				display:flex;
				height:102rpx;
				border-bottom:2rpx solid #f2f2f2;
				.coupon_type{
					margin-top:34rpx;
					background:#F9EFEF;
					color:#B33F33;
					width:68rpx;
					height:30rpx;
					line-height:30rpx;
					border-radius:40rpx;
					font-size:22rpx;
					text-align: center;
				}
				.coupon_name{
					color:#333;
					font-size:26rpx;
					margin-left:6rpx;
					margin-top:28rpx;
					font-weight:600;
				}
			}
			.detail-bottom{
				display:flex;
				margin-left:36rpx;
				.coupon_time{
					margin-top:38rpx;
					font-size:22rpx;
					color:#999;
				}
				.use{
					
					width:120rpx;
					height:44rpx;
					
					border:2rpx solid #f2f2f2;
					border-radius:58rpx;
					color:#333;
					font-size:22rpx;
					text-align: center;
					line-height:44rpx;
					margin-top:28rpx;
					margin-left:40rpx;
				}
			}
		}
		.coupon-next-used{
			width:470rpx;
			background:#fff;
			.detail-top{
				width:418rpx;
				margin-left:36rpx;
				display:flex;
				height:102rpx;
				border-bottom:2rpx solid #f2f2f2;
				.coupon_type{
					margin-top:34rpx;
					background:#F2F2F2;
					color:#999;
					width:68rpx;
					height:30rpx;
					line-height:30rpx;
					border-radius:40rpx;
					font-size:22rpx;
					text-align: center;
				}
				.coupon_name{
					color:#999;
					font-size:26rpx;
					margin-left:6rpx;
					margin-top:28rpx;
					font-weight:600;
				}
			}
			.detail-bottom{
				display:flex;
				margin-left:36rpx;
				.coupon_time{
					margin-top:38rpx;
					font-size:22rpx;
					color:#999;
				}
				.use{
					
					width:120rpx;
					height:44rpx;
					
					border:2rpx solid #f2f2f2;
					border-radius:58rpx;
					color:#999;
					font-size:22rpx;
					text-align: center;
					line-height:44rpx;
					margin-top:28rpx;
					margin-left:40rpx;
				}
			}
		}
	}
	.no-more {
	  width: 100%;
	  font-size: 24rpx;
	  text-align: center;
	  color: #cccccc;
		line-height: 80rpx;
	}
	.active{
		color:#999999; 
		
	}
</style>